<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Last clipping result - from MaoXian</title>
    <link href="_base.css" rel="stylesheet"/>
    <link href="last-clipping-result.css" rel="stylesheet"/>
  </head>
  <body>

    <div class="main">
      <div id="failed-task"></div>
      <div id="clipping-url"></div>
    </div>
    <template id="tpl-not-clipping-result">
      <div class="notice-light">${content}</div>
    </template>
    <template id="tpl-failed-task">
      <div class="notice-danger">${failureMessage}</div>
      <div class="notice-info">${helpMessage}</div>
      <div><strong>${originalUrlLabel} : ${originalUrl}</strong></div>
      <div class="detail">${detail}</div>
    </template>
    <template id="tpl-clipping-url">
      <div>
        <div class="notice-info">${notice}</div>
        <a href="${url}" id="target-url" data-method="${openMethod}">${url}</a>
      </div>
      <hr />
      <div class="copy-box">
        <div class="notice-info" i18n="notice.copy-url"></div>
        <input class="copy" type='text' value="${url}" readonly="true" />
      </div>
    </template>

    <!-- scripts -->
    <script src="../vendor/js/browser-polyfill.js"></script>
    <script src="../vendor/js/i18n.js"></script>
    <script src="../_locales/en/common.js"></script>
    <script src="../_locales/en/last-clipping-result.js"></script>
    <script src="../_locales/zh_CN/common.js"></script>
    <script src="../_locales/zh_CN/last-clipping-result.js"></script>
    <script src="last-clipping-result.js" type="module"></script>
  </body>
</html>
